<template>
  <div class="add_production_box">
    <el-dialog
      @close="handleClose(false)"
      @open="handleOpen"
      close-on-press-escape
      v-dialogDrag
      :title="'合炉任务详情'"
      :close-on-click-modal="false"
      :lock-scroll="false"
      :visible="showDialog"
      width="750px"
    >
      <el-form
        style="width: 80%; margin: 0 auto"
        class="tab_form"
        :model="productionForm"
        ref="productionFormRef"
        size="mini"
      >
        <el-row :gutter="16" type="flex">
          <el-col :span="12">
            <el-form-item label="设备信息:" prop="token">
              <el-tooltip
                v-if="
                  productionForm.deviceAssignment &&
                  productionForm.deviceAssignment.deviceTypeName
                "
                class="item"
                effect="dark"
                :content="productionForm.deviceAssignment.deviceTypeToken"
                placement="top"
              >
                <span style="color: #409eff; cursor: pointer">
                  {{ productionForm.deviceAssignment.deviceTypeName }}
                </span>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编号:" prop="token">
              <el-tooltip
                v-if="
                  productionForm.eviceAssignment &&
                  productionForm.eviceAssignment.deviceList[0].deviceName
                "
                class="item"
                effect="dark"
                :content="
                  productionForm.eviceAssignment.deviceList[0].deviceName
                "
                placement="top"
              >
                <span style="color: #409eff; cursor: pointer">
                  {{ productionForm.eviceAssignment.deviceList[0].deviceToken }}
                </span>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="任务号:" prop="token">
              <div>
                {{ productionForm.token }}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班产任务号:" prop="productionTaskNumber">
              <div>
                {{ productionForm.productionTaskNumber }}
              </div>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="单位:" prop="unit">
              <div>
                {{ productionForm.unit }}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="制造单元:" prop="manufactureSite">
              <div>
                {{ productionForm.manufactureSite }}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="批次号:" prop="batchNumber">
              <div>
                {{ productionForm.batchNumber }}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="零件号:" prop="partNumber">
              <div>
                {{ productionForm.partNumber }}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="零件名称:" prop="partName">
              <div>
                {{ productionForm.partName }}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工序号:" prop="processNumber">
              <div>
                {{ productionForm.processNumber }}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工序名称:" prop="processName">
              <div>
                {{ productionForm.processName }}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工艺版次:" prop="formulaVersion">
              <div>
                {{ productionForm.formulaVersion }}
              </div>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="来件数量:" prop="partTotalCount">
              <div>
                {{ productionForm.partTotalCount }}
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态:" prop="state">
              <div>
                {{ productionForm.state }}
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleClose(false)">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDetailsByid } from "@/api/productionFormula";
export default {
  props: {
    token: {
      type: String,
      default: "",
    },
    showDialog: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      productionForm: {
        token: "",
        formulaVersion: "",
        unit: "",
        cardNumber: "",
        batchNumber: "",
        specificationNumber: "",
        partName: "",
        partNumber: "",
        processNumber: "",
        processName: "",
        partTotalCount: "",
        passTotalNumber: "",
        metadata: {},
        state: "物料",
        formulaId: "",
        manufactureSite: "",
      },
    };
  },
  methods: {
    getEditData() {
      getDetailsByid(this.token).then(async (res) => {
        const r = res.data;
        this.productionForm = r;
      });
    },
    //弹窗打开执行操作
    handleOpen() {
      this.getEditData();
    },
    // 弹窗关闭执行操作
    handleClose(isRefresh) {
      this.$emit("update:showDialog", false);
    },
  },
};
</script>

<style lang='scss' scoped>
.tab_form {
  /* margin-right: 15px; */
  /deep/ .el-row--flex {
    flex-wrap: wrap;
  }
}
</style>
